// ===== 设计系统 - 颜色变量 =====

// 主题颜色 - 光亮主题
:root {
  // 主色调
  --primary-color: #667eea;
  --primary-light: #8fa4f3;
  --primary-dark: #4e63d2;
  --secondary-color: #764ba2;
  --accent-color: #ff69b4;
  
  // 文本颜色
  --text-primary: #2c3e50;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-disabled: #cccccc;
  
  // 背景颜色
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-muted: #e9ecef;
  --bg-overlay: rgba(255, 255, 255, 0.95);
  --bg-card: #ffffff;
  --bg-hover: #f5f5f5;
  --bg-code: #f8f9fa;
  --bg-banner: rgba(255, 255, 255, 0.5);
  --bg-decoration: rgba(255, 255, 255, 0.1);
  
  // 页面背景渐变
  --gradient-page: linear-gradient(135deg, #e3f2fd 0%, #fce4ec 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-accent: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  --gradient-warm: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-cool: linear-gradient(90deg, #48cae4, #023e8a, #0077b6);
  --gradient-rainbow: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24);
  --gradient-purple: linear-gradient(90deg, #6c5ce7, #a29bfe, #fd79a8);
  
  // 边框和阴影
  --border-color: rgba(227, 242, 253, 0.3);
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;
  --border-radius-xl: 24px;
  
  // 阴影系统
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.2);
  
  // 间距系统 (8px 基准)
  --space-xs: 0.25rem;  // 4px
  --space-sm: 0.5rem;   // 8px
  --space-md: 1rem;     // 16px
  --space-lg: 1.5rem;   // 24px
  --space-xl: 2rem;     // 32px
  --space-2xl: 3rem;    // 48px
  --space-3xl: 4rem;    // 64px
  
  // 字体系统
  --font-size-xs: 0.75rem;   // 12px
  --font-size-sm: 0.875rem;  // 14px
  --font-size-md: 1rem;      // 16px
  --font-size-lg: 1.125rem;  // 18px
  --font-size-xl: 1.25rem;   // 20px
  --font-size-2xl: 1.5rem;   // 24px
  --font-size-3xl: 2rem;     // 32px
  
  // 权重
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  // 行高
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  // 布局
  --navbar-height: 60px;
  --notification-height: 44px;
  --sidebar-width: 300px;
  --container-max-width: 1200px;
  
  // 动画
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  // Z-index 层级
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  // 通知栏文字颜色
  --notification-text: #ffffff;
  
  // 边框颜色
  --border-color: #e5e7eb;
  --border-color-light: #f3f4f6;
}

// 暗黑主题
[data-theme="dark"] {
  // 主色调（保持一致）
  --primary-color: #667eea;
  --primary-light: #8fa4f3;
  --primary-dark: #4e63d2;
  --secondary-color: #764ba2;
  --accent-color: #ff69b4;
  
  // 文本颜色
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-muted: #718096;
  --text-disabled: #4a5568;
  
  // 背景颜色
  --bg-primary: #1a202c;
  --bg-secondary: #2d3748;
  --bg-muted: #4a5568;
  --bg-overlay: rgba(26, 32, 44, 0.95);
  --bg-card: #2d3748;
  --bg-hover: #374151;
  --bg-code: #1f2937;
  --bg-banner: rgba(26, 32, 44, 0.8);
  --bg-decoration: rgba(102, 126, 234, 0.1);
  
  // 页面背景渐变（暗黑版本）
  --gradient-page: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  --gradient-accent: linear-gradient(45deg, #ef4444, #06b6d4);
  --gradient-warm: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-cool: linear-gradient(90deg, #1e40af, #0ea5e9, #0284c7);
  --gradient-rainbow: linear-gradient(90deg, #ef4444, #06b6d4, #3b82f6, #eab308);
  --gradient-purple: linear-gradient(90deg, #7c3aed, #8b5cf6, #ec4899);
  
  // 边框和阴影
  --border-color: rgba(113, 128, 150, 0.2);
  --border-color-light: rgba(113, 128, 150, 0.1);
  
  // 阴影系统（暗黑主题下更深）
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6);
}

// 响应式断点
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// 媒体查询混入
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}

@mixin respond-below($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: #{map-get($breakpoints, $breakpoint) - 1px}) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}